<template>
	<view :class="['fr_img', placeImageClass, isOverHide ? 'is_over_hide' : '']">
		<!-- <view style="color: #FFF;word-break: break-all;height: 100%;">{{ cacheSrc }}</view> -->
		
		<!-- 主图 -->
		<image :class="['fr_img_content', loaded ? 'loaded' : '', detailFlag ? 'detail' : 'nodetail']" 
			:src="cacheSrc" 
			:mode="detailFlag ? 'heightFix' : mode" 
			:lazy-load="lazyLoad" 
			:lazy-load-margin="lazyLoadMargin"
			:webp="webp" 
			:draggable="draggable"
			:show-menu-by-longpress="showMenuByLongpress" 
			@load="onImgLoad('load', $event)" 
			@error="onImgError('error', $event)" 
			@click="previewImage('click', $event)"
			style="border-radius: 16rpx;"
			/>

		<!-- 加载失败 -->
		<view v-if="loading_error" class="loading_error absolute">
			<image class="loading_error_img relative" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/seat-image.png`" mode="aspectFit"></image>
		</view>

		<!-- 加载中 -->
		<view v-else-if="!loading_complete" :class="['absolute', 'loading', isLoadingImgOriginSize ? 'loading_img_origin_size' : '']">
			<image class="loading_img" 
				v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/common/seat-image.png`"
				mode="aspectFit"></image>
		</view>

	</view>
</template>

<script>
	import {
		ImgCache
	} from './imgCache.js';
	export default {
		name: 'comPlaceImage',
		props: {
			placeImageClass: {
				type: String,
				default: "flex-justify-content-center",
			},
			
			// 是否溢出隐藏
			isOverHide: {
				type: Boolean,
				default: true,
			},
			
			// 和官方Image组件属性一致
			src: {
				type: String,
				default: "",
			},

			mode: {
				type: String,
				default: "",
			},

			lazyLoad: {
				type: Boolean,
				default: false,
			},

			lazyLoadMargin: {
				type: Number,
				default: 0,
			},

			webp: {
				type: Boolean,
				default: false,
			},

			showMenuByLongpress: {
				type: Boolean,
				default: false,
			},


			// 可选： 加载失败图片：可以本地url、网络url、base64 （与src一致）
			loadingErrorImg: {
				type: String,
			},

			// 可选： 加载中的图片
			// two-balls = 两个球来回转 
			// oblique-light = 斜光 
			// looming = 若影若现
			// 本地url、网络url、base64 = 自定义的加载中图片（与src一致）
			loadingIngImg: {
				type: String,
				default: "oblique-light",
			},

			// 可选：是否需要加载完成动画
			completeTransition: {
				type: Boolean,
				default: true,
			},
			
			// 是否预览
			isPreview: {
				type: Boolean,
				default: false,
			},
			// 预览列表下标
			listIndex: {
				type: Number,
				default: 0,
			},
			// 预览列表中item中image下标
			itemIndex: {
				type: Number,
				default: 0,
			},
			// 是否是详情页
			detailFlag: {
				type: Boolean,
				default: false,
			},
			
			// 是否保存原来loading图片大小 300,300 ; 默认 100%，100% 适应外层盒子大小
			isLoadingImgOriginSize: {
				type: Boolean,
				default: false,
			},
			
			// 是否能拖动图片
			draggable: {
				type: Boolean,
				default: false
			}
		},
		
		watch: {
			// 监听URL变化
			src: {
				handler(src) {
					this.handleCache(src);
				},
				immediate: true
			}
		},

		data() {
			return {
				// 缓存图片地址
				cacheSrc: '',
				loaded: false,
				loading_complete: false,
				loading_error: false,
			};
		},
		
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},

		methods: {
			/**
			 * 处理缓存
			 * @param {String} imgUrl 网络图片地址
			 */
			async handleCache(imgUrl) {
				// #ifdef H5 || MP-WEIXIN
				this.cacheSrc = imgUrl;
				return;
				// #endif
				// 判断图片是否存在缓存
				let localUrl = await ImgCache.getCache(imgUrl);
				if (localUrl) {
					// 存在缓存，直接用本地图片地址
					this.cacheSrc = localUrl;
				} else {
					// 不存在缓存，用网络地址
					this.cacheSrc = imgUrl;
					// 并且设置缓存
					ImgCache.setCache(imgUrl);
				}
			},
			
			onImgLoad: function(emit, event) {
				// 图片loading过渡时间
				setTimeout(() => {
					this.loading_error = false;
					this.loaded = true;
					this.loading_complete = true;
					this.$emit(emit, event);
				}, 200)
			},
			
			onImgError: function(emit, event) {
				this.loading_error = true;
				this.$emit(emit, event);
			},
			
			previewImage: function(emit, event) {
				if(this.isPreview){
					// this.$emit("previewImage", this.listIndex, this.itemIndex);
					this.$emit(emit, event);
				}
			},
			
		},
	}
</script>

<style lang="scss">
	.fr_img {
		width: 100%;
		height: 100%;
		position: relative;
		// overflow: hidden;
		
		&.is_over_hide {
			overflow: hidden;
		}

		.fr_img_content {
			left: 0;
			right: 0;
			margin: 0 auto;
			height: 100%;
			position: absolute;
			opacity: 0;
			z-index: 1;
			&.detail {
				max-width: 100%;
			}
			&.nodetail {
				width: 100%;
			}
			&.loaded {
				opacity: 1;
			}
		}

		.loading_complete_transition {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: transparent;
			// background-color: #000;
			animation: loading_complete_transition 1.2s forwards;
		}

		@keyframes loading_complete_transition {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}



		.loading_error {
			width: 100%;
			height: 100%;
			// background-color: #F8F8F8;
			position: absolute;

			display: flex;
			justify-content: center;
			align-items: center;

			.loading_error_img {
				width: 320rpx;
				height: 320rpx;
				max-width: 100%;
				max-height: 100%;
				border-radius: 16rpx;
			}
		}

		.loading {
			width: 100%;
			height: 100%;
			background-color: transparent;
			// background-color: #000;
			position: absolute;

			display: flex;
			justify-content: center;
			align-items: center;
			
			&.loading_img_origin_size {
				width: 320rpx;
				height: 320rpx;
				border-radius: 16rpx;
			}

			// 加载图
			.loading_img {
				width: 320rpx;
				height: 320rpx;
				max-width: 100%;
				max-height: 100%;
				border-radius: 16rpx;
			}

			// 斜光
			.loading_oblique_light {
				width: 100%;
				height: 100%;

				background-color: #e3e3e3;
				background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
				background-size: 320rpx 100%;
				background-repeat: repeat-y;
				background-position: 0 0;
				animation: loading_oblique_light .6s infinite;
			}

			@keyframes loading_oblique_light {
				to {
					background-position: 200% 0;
				}
			}


			// 若隐若现
			.loading_looming {
				width: 100%;
				height: 100%;
				animation: loading_looming 1s infinite linear;
				background-color: #e3e3e3;
			}

			@keyframes loading_looming {
				0% {
					background-color: rgba($color: #e3e3e3, $alpha: 0.5);
				}

				50% {
					background-color: rgba($color: #e3e3e3, $alpha: 1.0);
				}

				100% {
					background-color: rgba($color: #e3e3e3, $alpha: 0.5);
				}
			}

		}


	}
</style>
